<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
	<view>
		<!-- 加载状态 -->
		<u-loading-page :loading="loading"></u-loading-page>
		
		<!-- 图表收集度 -->
		<view class="charts-box" v-if="!loading">
			<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
		</view>
		
		<!-- 卡片 -->
		<view class="banner" v-if="!loading">
			<view class="u-demo-block">
				<u-swiper :list="finalPictureList" previousMargin="30" nextMargin="30" circular 
					bgColor="#F1F1F1" height="350px" width="100px" radius="5"></u-swiper>
			</view>
		</view>
		
		<!-- 图鉴名 -->
		<view v-if="!loading" v-for="item in finalList" :key="item.allId">
			<view class="everyOne" @click="toBooksItem(item.allId,item.allAscriptionId)">
				{{item.allName}}
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				loading: true,
				categoryId: '',
				userId: 0,
				// 最终显示的数据
				finalList: [],
				finalPictureList: [],
				// 图表数据
				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: [" #872D29", "#BAB8BB"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收集度",
						fontSize: 15,
						color: "FFFFFF"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
			};
		},
		onLoad(option) {
			const systemInfo = uni.getSystemInfoSync();
					this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.categoryId = option.categoryId
			this.userId = option.userId
			this.fetchData()
		},
		methods: {
			async fetchData() {
				this.loading = true
				try {
					// 并行发起两个请求
					const [marksRes, allRes] = await Promise.all([
						uni.request({
							url: this.$BASE_URL.baseUrl + '/books/marks/list',
							data: { marksUserId: this.userId }
						}),
						uni.request({
							url: this.$BASE_URL.baseUrl + '/books/all/list',
							data: { allAscriptionId: this.categoryId }
						})
					]);
					
					// 处理数据
					const marksBooks = marksRes[1].data.rows.map(item => item.marksAllId);
					const allBooks = allRes[1].data.rows;
					
					// 筛选出用户拥有的项目
					this.finalList = allBooks.filter(item => marksBooks.includes(item.allId));
					this.finalPictureList = this.finalList.map(item => item.allImg);
					
					// 更新图表数据
					this.updateChartData(this.finalList.length, allBooks.length);
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({ title: '数据加载失败', icon: 'none' });
				} finally {
					this.loading = false;
				}
			},
			
			updateChartData(collected, total) {
				const nameMapping = {
					0: "已拥有",
					1: "未拥有",
				};
				
				const data = [
					{ name: nameMapping[0], value: collected },
					{ name: nameMapping[1], value: total - collected }
				];
				
				this.chartData = {
					series: [{ data }]
				};
			},
			
			toBooksItem(id, allAscriptionId) {
				uni.navigateTo({
					url: `/pages/books/bookItem/bookItem?id=${id}&allAscriptionId=${allAscriptionId}&tip=0`
				})
			}
		}
	}
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 250px;
		margin-bottom: 30px;
	}

	.banner {
		margin-top: -30px;
		position: relative;
		padding: 20px;
	}

	.everyOne {
		float: left;
		height: 50px;
		text-align: 50px;
		font-size: 20px;
		color: antiquewhite;
		background-color: #A7090A;
		margin-left: 5%;
		margin-top: 5%;
		padding: 10px 10px;
	}
</style>